<template>
  <i-pageBody class="pageBody">
    <div slot="page-main" class="pageMain">
      <div class="fullpage">
        <div class="left">
          <div class="box">
            <div class="hd">
              <h5 class="title">能耗信息总览</h5>
            </div>
            <div class="bd">
              <div class="info-list">
                <div class="item">
                  <span class="crile"></span>
                  <span class="text">综合能源利用效率(%)</span>
                  <span class="num">{{ overview.energyUtilizaEff }}</span>
                </div>
                <div class="item">
                  <span class="crile"></span>
                  <span class="text">可再生能源利用效率(%)</span>
                  <span class="num green">{{
                    overview.reEnergyUtilizaEff
                  }}</span>
                </div>
              </div>

              <div class="list">
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/left-1.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">耗电量(亿瓦时)</div>
                    <div class="num">{{ overview.useedElecTotal }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/left-2.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">耗水量(亿吨)</div>
                    <div class="num">{{ overview.useedWaterTotal }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/left-3.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">耗气量(亿立方米)</div>
                    <div class="num">{{ overview.useedGasTotal }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/left-4.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">热(亿千焦)</div>
                    <div class="num">{{ overview.useedHeatTotal }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="box">
            <div class="hd">
              <h5 class="title">总供能情况</h5>
              <div class="tabs">
                <div
                        v-for="item in energys"
                        :key="item.value"
                        :class="['item', { active: item.value === activeEnergyType }]"
                        @click="changeEnergyType(item)"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="bd">
              <div class="info">
                {{supplyTitle}}
                <span class="color">{{ supply.pgen | noDataFormat }}</span>
              </div>
              <div id="echarts-left-line">
                <z-chart :chart-option="supplyChartOption"/>
              </div>
            </div>
          </div>

          <div class="box">
            <div class="hd">
              <h5 class="title">告警情况</h5>
            </div>
            <div class="bd">
              <div class="info">
                本月功能总有功(千瓦时)
                <span class="color">9,858</span>
              </div>
              <div id="echarts-pie">
                <z-chart :chart-option="pieChartOption"/>
              </div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="tit">
            <img src="../../../../assets/img/fullpage/logo.png" class="icon"/>
          </div>
          <div class="time">累计数据截止：{{ currentTime }}</div>
          <div class="current-area">{{currentArea}}<Button v-if="currentArea != '湖南省'" size="small" type="primary" @click="backToAll" style="margin-left:20px">返回全省</Button></div>
          <div id="echarts-map">
            <z-chart :chart-option="mapChartOption" @click="mapClick"/>
          </div>
        </div>
        <div class="right">
          <div class="box">
            <div class="hd">
              <h5 class="title">环境信息监测</h5>
              <div class="tip">天气 ： {{ weather.weather }}</div>
            </div>
            <div class="bd">
              <div class="list list-row-3">
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-1.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">温度(°c)</div>
                    <div class="num">{{ weather.temperature }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-2.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">湿度(%)</div>
                    <div class="num">{{ weather.humidity }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-3.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">雨量(mm)</div>
                    <div class="num">{{ weather.rainfall }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-4.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">风向</div>
                    <div class="num">{{ weather.windDirection }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-5.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">风速(m/s)</div>
                    <div class="num">{{ weather.windSpeed }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="thumb">
                    <img
                            src="../../../../assets/img/fullpage/right-6.png"
                            class="icon"
                    />
                  </div>
                  <div class="desc">
                    <div class="name">辐射强度(w/m3)</div>
                    <div class="num">{{ weather.irradiation }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="box">
            <div class="hd">
              <h5 class="title">总用能概况</h5>
              <div class="tabs">
                <div
                        v-for="item in energys"
                        :key="item.value"
                        :class="[
                    'item',
                    { active: item.value === activeUseEnergyType }
                  ]"
                        @click="changeUseEnergyType(item)"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="bd">
              <div class="info">
                {{useTitle}}
                <span class="color">{{ useEnergy.pgen |noDataFormat }}</span>
              </div>
              <div id="echarts-right-line">
                <z-chart :chart-option="useEnergyChartOption"/>
              </div>
            </div>
          </div>

          <div class="box">
            <div class="hd">
              <h5 class="title">CPS运营监控</h5>
            </div>
            <div class="bd">
              <div class="table">
                <div class="header">
                  <div class="th span1">GPS系统名称</div>
                  <div class="th span2">故障状态</div>
                  <div class="th span3">操作</div>
                </div>
                <div class="body">
                  <div v-for="(item, index) in monitor" class="item">
                    <div @click="toggle(item, index)" class="tr">
                      <div class="td span1">
                        <img
                                v-if="!item.show"
                                class="icon"
                                src="../../../../assets/img/fullpage/bottom.png"
                                alt=""
                        />
                        <img
                                v-if="item.show"
                                class="icon"
                                src="../../../../assets/img/fullpage/top.png"
                                alt=""
                        />
                        <span class="text">{{ item.custName }}</span>
                      </div>
                      <div v-if="item.status == 0" class="td span2">
                        <span class="cirle red"></span>
                        <span class="text">故障</span>
                      </div>
                      <div v-if="item.status == 1" class="td span2">
                        <span class="cirle"></span>
                        <span class="text">正常</span>
                      </div>
                      <div class="td span3">
                        <span class="text"></span>
                      </div>
                    </div>
                    <div v-if="item.show" class="sub-item">
                      <div v-for="el in item.cpsSystemVOS" class="tr">
                        <div class="td span1">
                          <span class="text">{{ el.name }}</span>
                        </div>
                        <div v-if="el.status == 0" class="td span2">
                          <span class="cirle red"></span>
                          <span class="text">故障</span>
                        </div>
                        <div v-if="el.status == 1" class="td span2">
                          <span class="cirle"></span>
                          <span class="text">正常</span>
                        </div>
                        <div class="td span3" @click="goToOther(el.url)">
                          <span class="text" >跳转</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </i-pageBody>
</template>

<script>
import echarts from "echarts";
import ZChart from "@/components/echarts/zchart";
import data from "@/static/hunan1.json";
import zhuzhou from "@/static/zhuzhou.json";
import apiPath from "@/api/config/dev";
import { axiosGet } from "@/api/sysSetting.js";
import moment from "moment";

const colors = ["#FC7F7D", "#91D66C", "#00AAFF"];
let pieData = [];

function baiStr(val, i) {
    if (val < 10) {
        return `\t\t\t\t\t\t\t\t\t\t\t{t1|00}{b${i}|${val}%}`;
    }
    if (val > 10 && val < 100) {
        return `\t\t\t\t\t\t\t\t\t\t\t{t1|0}{b${i}|${val}%}`;
    }
    return `\t\t\t\t\t\t\t\t\t\t\t{b${i}|${val}%}`;
}

export default {
    name: "fullpage",
    components: {ZChart},
    data() {
        return {
            currentTime: moment().format("YYYY年MM月DD日"),
            useEnergyChartOption: {
                grid: {
                    top: 30,
                    bottom: 30,
                    right: 0
                },
                xAxis: {
                    type: "category",
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#AEE1FF",
                        fontSize: 14,
                        formatter: (val) => {
                            // const arr = this.lineChartOption.series.data
                            let str = "";
                            // if (val === arr[arr.length - 1].days) {
                            //   str = '(日)'
                            // }
                            return (val > 9 ? val : "0" + val) + str;
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#163072",
                            width: 2
                        }
                    }
                },
                yAxis: {
                    splitNumber: 4,
                    axisLabel: {
                        color: "#AEE1FF",
                        fontSize: 14
                    },
                    nameTextStyle: {
                        color: "#AEE1FF",
                        fontSize: 14
                    },
                    name: "电量(千瓦时）",
                    axisLine: {
                        show: false
                    },
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#163072"
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: {
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#46A4F7"
                            },
                            {
                                offset: 1,
                                color: "transparent"
                            }
                        ])
                    },
                    symbol: "none",
                    itemStyle: {
                        color: "#46A4F7"
                    },
                    data: [],
                    type: "line"
                }
            },
            supplyTitle: '本月功能总有功(千瓦时)',
            useTitle: '本月功能总有功(千瓦时)',
            supplyChartOption: {
                grid: {
                    top: 30,
                    bottom: 30,
                    right: 0
                },
                xAxis: {
                    type: "category",
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#AEE1FF",
                        fontSize: 14,
                        formatter: (val) => {
                            // const arr = this.lineChartOption.series.data
                            let str = "";
                            // if (val === arr[arr.length - 1].days) {
                            //   str = '(日)'
                            // }
                            return (val > 9 ? val : "0" + val) + str;
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#163072",
                            width: 2
                        }
                    }
                },
                yAxis: {
                    splitNumber: 4,
                    axisLabel: {
                        color: "#AEE1FF",
                        fontSize: 14
                    },
                    nameTextStyle: {
                        color: "#AEE1FF",
                        fontSize: 14
                    },
                    name: "电量(千瓦时)",
                    axisLine: {
                        show: false
                    },
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#163072"
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: {
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#46A4F7"
                            },
                            {
                                offset: 1,
                                color: "transparent"
                            }
                        ])
                    },
                    symbol: "none",
                    itemStyle: {
                        color: "#46A4F7"
                    },
                    data: [],
                    type: "line"
                }
            },
            mapChartOption: {
                geo: [
                    {
                        top: 72,
                        map: "Map",
                        aspectScale: 0.85,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: 580,
                        itemStyle: {
                            normal: {
                                borderWidth: 8,
                                borderColor: "#062153",
                                areaColor: "#0e2d69",
                                shadowColor: "#081029",
                                shadowBlur: 8,
                                shadowOffsetX: 0,
                                shadowOffsetY: 6
                            }
                        }
                    },
                    {
                        top: 72,
                        map: "Map",
                        aspectScale: 0.85,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: 580,
                        itemStyle: {
                            normal: {
                                borderWidth: 4,
                                borderColor: "#0885E6",
                                areaColor: "#0e2d69",
                                shadowColor: "#081029",
                                shadowBlur: 8,
                                shadowOffsetX: 0,
                                shadowOffsetY: 6
                            }
                        }
                    }
                ],
                visualMap: {
                    type: "piecewise",
                    splitNumber: 5,
                    itemWidth: 60,
                    itemHeight: 18,
                    text:['0'],
                    pieces: [
                        {
                            min: 0,
                            max: 20,
                            label: "20",
                            color: "#0e2d69"
                        },
                        {
                            min: 20,
                            max: 40,
                            label: "40",
                            color: "#163c82"
                        },
                        {
                            min: 40,
                            end: 60,
                            label: "60",
                            color: "#154297"
                        },
                        {
                            start: 60,
                            end: 80,
                            label: "80",
                            color: "#174baf"
                        },
                        {
                            start: 80,
                            end: 100,
                            label: "100",
                            color: "#2963D3"
                        }
                    ],
                    textStyle: {
                        color:'white',
                    },
                    seriesIndex: [1],
                    left: "center",
                    orient: "horizontal",
                    itemGap: 5,
                    backgroundColor: "#0a1b55",
                    showLabel: true,
                    bottom: 20,
                    controller: {
                        inRange: {
                            symbol: "rect"
                        }
                    }
                },
                series: [
                    {
                        name: "定位点",
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        label: {
                            show: true,
                            position: "bottom",
                            color: "#fff",
                            formatter: (obj) => obj.name
                        },
                        itemStyle: {
                            normal: {
                                color: "#36ffb1"
                            }
                        },
                        // effectType: 'ripple',
                        // showEffectOn: 'emphasis', // 高亮（hover）的时候显示特效。
                        // silent: true, // 图形是否不响应和触发鼠标事件
                        // hoverAnimation: false,
                        // legendHoverLink: false,
                        rippleEffect: {
                            period: 104,
                            brushType: "fill"
                        },
                        symbolSize: 6,
                        zlevel: 1,
                        data: []
                    },
                    {
                        top: 72,
                        type: "map",
                        zlevel: 0,
                        aspectScale: 0.85,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: 580,
                        geoIndex: 2,
                        map: "Map",
                        data: {},
                        itemStyle: {
                            normal: {
                                areaColor: "#323c48",
                                borderColor: "#2F5BAF",
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: "rgba(19,74,172,0.97)"
                            }
                        },
                        label: {
                            normal: {
                                // show: true, //显示省份标签
                                textStyle: {
                                    color: "#fff", //省份标签字体颜色
                                    fontSize: 12
                                }
                            },
                            emphasis: {
                                // 对应的鼠标悬浮效果
                                show: false,
                                textStyle: {
                                    color: "#fff"
                                }
                            }
                        }
                    }
                ]
            },
            pieChartOption: {
                color: colors,
                backgroundColor: "#0F2553",
                legend: {
                    right: 20,
                    icon: "circle",
                    itemWidth: 10,
                    itemHeight: 10,
                    top: "middle",
                    itemGap: 25,
                    textStyle: {
                        fontSize: 14,
                        // width: 200,
                        rich: {
                            a: {
                                align: "left",
                                color: "#ADE1FF"
                            },
                            a1: {
                                align: "center",
                                color: colors[0]
                            },
                            a2: {
                                align: "center",
                                color: colors[1]
                            },
                            a3: {
                                align: "center",
                                color: colors[2]
                            },
                            b1: {
                                align: "right",
                                color: colors[0]
                            },
                            b2: {
                                align: "right",
                                color: colors[1]
                            },
                            b3: {
                                align: "right",
                                color: colors[2]
                            },
                            t1: {
                                color: "transparent"
                            }
                        }
                    },
                    orient: "vertical",
                    formatter: (name) => {
                        const index = pieData.findIndex((ele) => ele.name === name);
                        const ele = pieData[index];
                        const i = index + 1;
                        return [
                            `{a|${name}}`,
                            `{a${i}|\t\t\t\t\t\t\t\t\t\t\t\t\t\t${ele.alarmNum}}`,
                            baiStr(ele.alarmPercent, i)
                        ].join("");
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: ["32%", "70%"],
                        center: ["20%", "50%"],
                        hoverAnimation: false,
                        label: {
                            show: false,
                            position: "center"
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "#0F2553",
                                borderWidth: 4
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [],
                        z: 1
                    },
                    {
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: "#294857",
                                borderColor: "#0F2553",
                                borderWidth: 4
                            }
                        },
                        type: "pie",
                        hoverAnimation: false,
                        radius: ["26%", "33%"],
                        center: ["20%", "50%"],
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [],
                        z: 2
                    }
                ]
            },
            overview: {},
            weather: {},
            monitor: [],
            supply: {
                pgen: "0",
                children: []
            },
            useEnergy: {
                pgen: "0",
                children: []
            },
            energys: [
                {label: "用电", value: 1},
                {label: "用水", value: 2},
                {label: "用气", value: 3},
                {label: "用热", value: 4}
            ],
            activeEnergyType: 1,
            activeUseEnergyType: 1,
            alarmOvervice: {
                alarmStatisticsVOS: []
            },
            cpsDist: {
                areaName: "",
                areaNo: "",
                areaType: "", // 区域等级
                siteNum: 0,
                children: []
            },
            currentArea:'湖南省',
        };
    },
    computed: {},
    created() {
        this.initOverview();
        this.initWeather();
        this.initMonitor();
        this.initSupply();
        this.initUseEnergy();
        this.getAlarmOvervice();
        this.getCPSDist();
    },
    mounted() {
        // this.$nextTick(() => this.getGeoJson(data))
        // axiosGet('/cps/areas_v2/bound/430382.json', {}).then((data) => {
        //   this.cpsDist = data.result;
        // })
    },
    methods: {
        backToAll() {
            this.currentArea = '湖南省'
          this.getCPSDist()
        },
        mapClick(params) {
            console.log(params)
            if(params.data.level != 'district') {
                this.currentArea = params.name;
                const {
                    data: {areaNo}
                } = params;
                this.getCPSDist(areaNo);
            }
        },
        changeEnergyType(item) {
            this.activeEnergyType = item.value;
            this.initSupply();
        },
        changeUseEnergyType(item) {
            this.activeUseEnergyType = item.value;
            this.initUseEnergy();
        },

        toggle(item, index) {
            this.$set(item, "show", !item.show);
        },
        goToOther(url='') {
            if(url.indexOf('http')>-1) {
                window.open(url)
          }
          else {
                this.$router.push(url)
            }
        },
        initOverview() {
            axiosGet(apiPath.scada.url + "/scada/panoramahall/overview", {}).then(
                (data) => {
                    this.overview = data.result;
                }
            );
        },
        initWeather() {
            axiosGet(apiPath.scada.url + "/scada/panoramahall/getWeather", {}).then(
                (data) => {
                    this.weather = data.result;
                }
            );
        },
        initMonitor() {
            axiosGet(
                apiPath.scada.url + "/scada/panoramahall/listCPSMonitor",
                {}
            ).then((data) => {
                this.monitor = data.result;
            });
        },
        getAlarmOvervice() {
            axiosGet(
                apiPath.scada.url + "/scada/panoramahall/getAlarmOvervice",
                {}
            ).then((data) => {
                this.alarmOvervice = data.result;
                pieData = this.alarmOvervice.alarmStatisticsVOS.map((item) => ({
                    name: item.alarmName,
                    value: item.alarmNum,
                    ...item
                }));
                this.pieChartOption.series[0].data = pieData;
                this.pieChartOption.series[1].data = pieData;
            });
        },
        // 总供能情况
        initSupply() {
            switch (this.activeEnergyType) {
                case 1:
                    this.supplyChartOption.yAxis.name = '电量(千瓦时)';
                    this.supplyTitle = '本月功能总有功(千瓦时)'
                    break;
                case 2:
                    this.supplyChartOption.yAxis.name = '吨';
                    this.supplyTitle = '本月总用水量(吨)'

                    break;
                case 3:
                    this.supplyChartOption.yAxis.name = '立方米';
                    this.supplyTitle = '本月总用气量(立方米)'

                    break;
                case 4:
                    this.supplyChartOption.yAxis.name = '千焦';
                    this.supplyTitle = '本月总用热量(千焦)'

                    break;
                default:
                    this.supplyChartOption.yAxis.name = '电量(千瓦时)';
                    this.supplyTitle = '本月功能总有功(千瓦时)'

                    break;
            }

            axiosGet(apiPath.scada.url + "/scada/panoramahall/listGenEnergyChart", {
                energyType: this.activeEnergyType
            }).then((data) => {
                this.supply = data.result;
                this.supplyChartOption.series.data = this.supply.children.map(
                    (item) => [item.days, item.energySupplyDay || 0]
                );
            });
        },
        // 总用能情况
        initUseEnergy() {
            switch (this.activeUseEnergyType) {
                case 1:
                    this.useEnergyChartOption.yAxis.name = '电量(千瓦时)';
                    this.useTitle = '本月功能总有功(千瓦时)'
                    break;
                case 2:
                    this.useEnergyChartOption.yAxis.name = '吨';
                    this.useTitle = '本月总用水量(吨)'

                    break;
                case 3:
                    this.useEnergyChartOption.yAxis.name = '立方米';
                    this.useTitle = '本月总用气量(立方米)'

                    break;
                case 4:
                    this.useEnergyChartOption.yAxis.name = '千焦';
                    this.useTitle = '本月总用热量(千焦)'

                    break;
                default:
                    this.supplyChartOption.yAxis.name = '电量(千瓦时)';
                    this.useTitle = '本月功能总有功(千瓦时)'

                    break;
            }

            axiosGet(apiPath.scada.url + "/scada/panoramahall/listUseEnergyChart", {
                energyType: this.activeUseEnergyType
            }).then((data) => {
                this.useEnergy = data.result;
                this.useEnergyChartOption.series.data = this.useEnergy.children.map(
                    (item) => [item.days, item.energySupplyDay || 0]
                );
            });
        },
        // 总用能情况
        async getCPSDist(areaNo = "") {
            try {
                let data = await axiosGet(
                    apiPath.scada.url + "/scada/panoramahall/getCPSDist?areaNo=" + areaNo
                );
                this.cpsDist = data.result;
                // const fullStr = this.cpsDist.areaType === '04' ||this.cpsDist.areaType === '03' ? '_geojson' : '_geojson_full' // 区域，不要请求子集
                axiosGet(
                    `/static/huNanGeoData/${this.cpsDist.areaNo}_geojson_full.json`
                )
                    .then((data) => {
                        this.getGeoJson(data);
                    })
                    .catch(() => {
                        axiosGet(
                            `/static/huNanGeoData/${this.cpsDist.areaNo}_geojson.json`
                        ).then((data) => {
                            this.getGeoJson(data);
                        });
                    });
            } catch (e) {
                console.log(e);
            }
        },

        getGeoJson(data) {
            this.formatMapData(data.features);
        },
        formatMapData(Json) {
            let mapData = [];
            let geoData = [];
            let mapJson = {};
            Json.forEach((item) => {
                geoData.push({
                    name: item.properties.name,
                    value: item.properties.centroid.concat(1)
                });
                const cityCode = item.properties.adcode;
                const obj =
                    this.cpsDist.children.find((e) => e.areaNo == cityCode) || {};
                mapData.push({
                    name: item.properties.name,
                    value: obj.siteNum || 0,
                    level: item.properties.level,
                    cityCode: item.properties.adcode,
                    ...obj
                });
            });
            // geoJson必须这种格式
            mapJson.features = Json;
            // 去渲染echarts
            this.initECharts({mapData, mapJson, geoData});
        },
        initECharts(option) {
            this.$echarts.registerMap("Map", option.mapJson);
            this.mapChartOption.series[0].data = option.geoData;
            this.mapChartOption.series[1].data = option.mapData;
        }
    }
};
</script>

<style scoped lang="scss">
  * {
    font-family: Microsoft YaHei;
  }

  .table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid RGBA(23, 48, 105, 1);
    border-right: 1px solid RGBA(23, 48, 105, 1);
    margin-top: 1.125vw;
  }

  .table .th,
  .table .td {
    display: flex;
    align-items: center;
  }

  .table .span1 {
    width: 10vw;
  }

  .table .span2 {
    width: 6.25vw;
  }

  .table .span3 {
    width: 6.875vw;
  }

  .table .cirle {
    width: 0.625vw;
    height: 0.625vw;
    background: #90d66d;
    border-radius: 50%;
    margin-right: 0.625vw;
  }

  .table .cirle.red {
    width: 0.625vw;
    height: 0.625vw;
    background: #fc7f7d;
    border-radius: 50%;
  }

  .table .icon {
    margin-right: 0.625vw;
  }

  .table .th,
  .table .td {
    border-left: 1px solid RGBA(23, 48, 105, 1);
    padding-left: 0.625vw;
    font-size: 0.675vw;
    font-weight: bold;
    color: #ade1ff;
  }

  .table .header {
    background-color: RGBA(12, 32, 81, 1);
    height: 2.5vw;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid RGBA(23, 48, 105, 1);
  }

  .table .body {
    background-color: RGBA(14, 35, 85, 1);
    height: 13.125vw;
    overflow: scroll;
  }

  .table .body::-webkit-scrollbar {
    background-color: transparent;
  }

  .table .body::-webkit-scrollbar-thumb {
    background-color: rgba(12, 32, 81, 1);
  }

  .table .body .item .tr {
    height: 2.8125vw;
    border-bottom: 1px solid RGBA(23, 48, 105, 1);
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }

  .table .body .sub-item {
    display: flex;
    flex-direction: column;
  }

  .table .body .sub-item .span1 {
    padding-left: 3.75vw;
  }

  .table .body .sub-item .tr {
    height: 2.5vw;
    border: 0px;
  }

  .table .body .sub-item .td {
    border: 0px;
  }

  #echarts-right-line,
  #echarts-left-line {
    height: 15vh;
  }

  #echarts-pie {
    height: 12.5vw;
    margin-top: 1.125vw;
  }

  .fullpage {
    background: url(../../../../assets/img/fullpage/bg.png) center center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .fullpage .box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.625vw;
    overflow: hidden;
    background: rgba(14, 40, 91, 0.5);
    margin-top: 1.52vh;
    border: 1px solid #162d63;
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.2);
  }

  .fullpage .box .hd {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .fullpage .box .hd .title {
    font-size: 0.8vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    height: 20px;
    display: flex;
    align-items: center;
    padding-left: 0.352vw;
    color: #00a4ff;
    border-left: 0.3125vw solid rgba(0, 164, 255, 1);
  }

  .fullpage .box .hd .tip {
    font-size: 0.675vw;
    font-weight: 400;
    color: #ade1ff;
  }

  .fullpage .box .bd .info {
    font-size: 0.8vw;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ade1ff;
    display: flex;
    flex-direction: row;
    margin-top: 0.8vw;
    margin-bottom: 0.7vw;
    align-items: center;
  }

  .fullpage .box .bd .info .color {
    font-size: 1.05vw;
    color: #fff;
    margin-left: 1.2vw;
  }

  .fullpage .box .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fullpage .box .list-row-3 {
    margin-top: 2.59vw;
  }

  .fullpage .box .list .item {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .fullpage .box .list-row-3 .item {
    width: 33.333%;
    padding-right: 0.625vw;
    background: url(../../../../assets/img/fullpage/clip.png) right center no-repeat;
  }

  .fullpage .box .list-row-3 .item:nth-of-type(3n) {
    background-image: none;
  }

  .fullpage .box .list-row-3 .item:nth-of-type(n + 4) {
    margin-top: 1.6vw;
  }

  .fullpage .box .list .item .thumb {
    height: 4.4375vw;
    margin-right: 20px;
  }

  .fullpage .box .list .item .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fullpage .box .list .item .desc .name {
    font-size: 0.675vw;
    font-weight: 400;
    color: #ade1ff;
  }

  .fullpage .box .list .item .desc .num {
    font-size: 1.05vw;
    font-weight: 400;
    color: #ffffff;
  }

  .fullpage .left {
    /*width: 35.9375vw;*/
    width: 32%;
  }

  .fullpage .left .list {
    background-image: url("../../../../assets/img/fullpage/gril.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .fullpage .left .info-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1.125vw;
    margin-bottom: 1.125vw;
  }

  .fullpage .left .info-list .item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .fullpage .left .info-list .item .crile {
    width: 0.625vw;
    height: 0.625vw;
    background: linear-gradient(90deg, #fea529, #f7de55);
    border-radius: 50%;
  }

  .fullpage .info-list .item .text {
    color: rgba(173, 225, 255, 1);
    font-size: 0.675vw;
    margin: 0px 0.625vw;
  }

  .fullpage .info-list .item .num {
    color: rgba(252, 127, 125, 1);
    font-size: 1.05vw;
  }

  .fullpage .info-list .item .num.green {
    color: rgba(144, 214, 109, 1);
  }

  .fullpage .tabs {
    display: flex;
    flex-direction: row;
  }

  .fullpage .tabs .item {
    width: 3vw;
    height: 1.375vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d2f7b;
    border-radius: 2px;
    font-size: 0.75vw;
    font-weight: 400;
    color: #ffffff;
    margin-left: 0.625vw;
    cursor: pointer;
  }

  .fullpage .tabs .item.active {
    background-color: rgba(8, 147, 253, 1);
  }

  .fullpage .center {
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    /*padding: 0 4.1875vw;*/
    width: 36%;
  }
  .current-area {
    color: white;
    transform: translate(0,20px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1000;
  }

  .fullpage .center .tit {
    margin-top: 2.0625vw;
  }

  .fullpage .center #echarts-map {
    /*flex: 1;*/
    height: 100%;
    position: relative;
    top:-20px;
  }

  .fullpage .center .tit .icon {
    width: 26.875vw;
    height: 5vw;
  }

  .fullpage .center .time {
    font-size: 14px;
    font-weight: 400;
    color: #ade1ff;
    margin-top: 1.4375px;
    width: 26.875vw;
    text-align: right;
  }

  .fullpage .right {
    /*width: 35.9375vw;*/
    width: 32%;
  }

  .z-test-map-too {
    position: absolute;
    width: 330px; // 每个 itemWidth 是 60，itemGap 是 5，一共 230
    height: 28px; // 每个 itemHeight 是 18，itemGap 是 5，一共 24
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
  }

  .z-test-map-too-text {
    color: #ade1ff;
    font-size: 14px;
    position: absolute;
    top: 50%;

    &:first-child {
      left: 5px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(2) {
      left: 65px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(3) {
      left: 130px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(4) {
      left: 195px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(5) {
      left: 260px;
      transform: translate(-50%, -50%);
    }

    &:nth-child(6) {
      left: 325px;
      transform: translate(-50%, -50%);
    }
  }
</style>
